<template>
  <div class="two_activity">
    <div class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p><span>图片要求！</span><br />图片宽度800px，高度300px。</p>
    </div>
    <div v-for="(item, index) in imgList" :key="index" class="text-center item_wrap">
      <div class="text-left header">
        <span style="color:#666666">右侧图片</span>
      </div>
      <crop-upload class="w-100 img_wrap" show-type="photo" :init-val="item.img" wrapper-width="359px"
        wrapper-height="171px" :img-width="800" :img-height="300" :photo-width="359" :photo-height="171"
        @setVal="(val)=>{item.img=val}"></crop-upload>
      </div>
      <div class="input_wrapper">
        <div v-if="formData.jumpType && formData.jumpUrl" class="flex align-center link_val">
          <span class="type">{{ formData.jumpType == 1 ? '文本链接' : '商品链接' }}</span>
          <el-tooltip v-if="type === 'bannerCol' || linkVal.length > 20" class="item" effect="dark" :content="linkVal" placement="top-start">
            <p class="flex-1 text-ellipsis">{{ linkVal }}</p>
          </el-tooltip>
          <p v-else class="flex-1 text-ellipsis">{{ linkVal }}</p>
          <span class="color-999 pointer" @click="deleteLink"><i class="el-icon-error" /></span>
        </div>
        <div v-else class="add-div" @click="addLink">
          <i class="el-icon-link" />添加链接
        </div>
      </div>
      <link-dialog ref="linkDialog" @setVal="setVal" />
  </div>
</template>

<script>
import cropUpload from "@/components/cropUpload";
import linkDialog from '../components/linkDialog';
export default {
  components: { cropUpload, linkDialog, },
  data() {
    return {
      imgList: [
        {
          img: '',
          jumpUrl: ''
        }
      ],
      formData:{
        goods:{
          cate_name:'',
          goods_id:'',
          imgurl:'',
          pact_type:'',
          price:'',
          shopname:'',
          title:''
        },
        img:'',
        jumpType:'',
        jumpUrl:''
      }
    }
  },
  computed: {
    linkVal() {
      return this.formData.jumpType === 1 ? this.formData.jumpUrl : this.formData.goods.title
    }
  },
  methods:{
    deleteLink() {
      this.formData.jumpUrl = ''
      this.formData.goods = {}
    },
    setVal({ jumpType, jumpUrl, goods }) {
      this.formData.jumpType = jumpType
      this.formData.jumpUrl = jumpUrl
      this.formData.goods = jumpType === 2 ? goods : {}
    },
    addLink() {
      console.log(123);
      this.$refs.linkDialog.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.item_wrap .input_wrapper {
  margin-left: 0;
}

.img_wrap {
  margin: 10px 0;
}
</style>
